{% extends "template_base.html" %}
{% block title %}DeepyWeb - Log in or log up!{% endblock %}
{% block script %}
<script>
    $(function () {
        var text = document.getElementById("my_alert").textContent;
        if (text != '') {
            alert(text);
        }
    });

    function change(str) {
        document.getElementById(str).removeAttribute("readonly");
        return false;
    }

    function change_both() {
        document.getElementById("origin_password").removeAttribute("readonly");
        document.getElementById("new_password").removeAttribute("readonly");
        return false;
    }

    function check_password(old_pass) {
        var check_pass = document.getElementById("origin_password").value;
        if (check_pass == '' || old_pass == check_pass) {
            return true;
        } else {
            alert("原始密码错误！");
            return false;
        }
    }

</script>
{% endblock %}

{% block navbar %}
<nav id="navbar" class="navbar">
    <ul>
        <!--<li><a class="nav-link scrollto active " href="#header">Home</a></li>-->
        <li><a class="nav-link scrollto" href="/">主 页</a></li>
        {% if not logged %}
        <li><a class="getstarted scrollto" href="login">登 录</a></li>
        {% else %}
        <li><a class="getstarted scrollto" href="logout">登 出</a></li>
        {% endif %}

    </ul>
    <i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
{% endblock %}

{% block main %}
<main id="main">
    <span id="my_alert" style="display:none;">{{my_alert}}</span>
    <!--        <div id="wrong_alert" style="display:none">{{wrong_alert}}</div>-->
    <!-- ======= Breadcrumbs ======= -->
    <section class="breadcrumbs">
        <div class="container">
            <ol>
                <li><a href="welcome">Home Page</a></li>
            </ol>
            <h2>User Center</h2>
        </div>
    </section>
    <!-- End Breadcrumbs -->

    <section class="inner-page">
        <div class="container">

            <!-- Outer Row -->
            <div class="register-form">
                <div class="col-xl-10 col-lg-12 col-md-9" style="margin: 0 auto;">
                    <div class="card o-hidden border-0 shadow-lg my-5" ,
                         style="width: 50%;margin: auto;text-align: center;">
                        <div class="card-body p-0">
                            <!-- Nested Row within Card Body -->
                            <div class="row">

                                <div class="p-5">

                                    <form class="user" name="manage" onsubmit="finish_check();" method="post"
                                          action="#">

                                        <div class="form-group">
                                            <div class="text-center">
                                                <h2>基 本 信 息</h2>
                                            </div>
                                            <table style="text-align: center; margin: 0 auto">
                                                <colgroup>
                                                    <col style="width: 20%;">
                                                    <col style="width: 70%;">
                                                    <col style="width: 10%;">
                                                </colgroup>
                                                <tbody>
                                                <tr>
                                                    <th>
                                                        <div class="my_manage" style="text-align: center">用户名：</div>
                                                    </th>
                                                    <th>
                                                        <input type="text"
                                                               class="form-control form-control-user"
                                                               id="user_name"
                                                               readonly="readonly"
                                                               value="{{result['u_name']}}"
                                                               placeholder="{{result['u_name']}}"
                                                               name="user_name"
                                                               style="width:100%; height:40px;border-radius: 10px;border-color:gainsboro;display: initial">
                                                    </th>
                                                    <th>
                                                        <div style="text-align: center;margin: auto">
                                                            <a type="button" onclick="change('user_name')">
                                                                <img
                                                                        src="../static/assets/img/my_pencil.webp"
                                                                        style="width: 20px">
                                                            </a>
                                                        </div>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <span class="my_manage">邮 箱：</span>
                                                    </th>
                                                    <th>
                                                        <input type="text"
                                                               class="form-control form-control-user"
                                                               id="user_email"
                                                               value="{{result['u_email']}}"
                                                               name="user_email"
                                                               readonly="readonly"
                                                               style="width:100%; height:40px;border-radius: 10px;border-color:gainsboro;display: initial">
                                                    </th>
                                                    <th>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <span class="my_manage">手机号：</span>
                                                    </th>
                                                    <th>
                                                        <input type="text"
                                                               class="form-control form-control-user"
                                                               id="user_phonenum"
                                                               readonly="readonly"
                                                               value="{{result['u_phonenum']}}"
                                                               name="user_phonenum"
                                                               style="width:100%; height:40px;border-radius: 10px;border-color:gainsboro;display: initial">
                                                    </th>
                                                    <th>
                                                        <div style="text-align: center;margin: auto">
                                                            <a type="button" onclick="change('user_phonenum')">
                                                                <img
                                                                        src="../static/assets/img/my_pencil.webp"
                                                                        style="width: 20px">
                                                            </a>
                                                        </div>
                                                    </th>
                                                </tr>
                                                </tbody>

                                            </table>
                                            <br>
                                            <br>

                                            <div class="text-center">
                                                <h2>修 改 密 码</h2>
                                            </div>
                                            <table style="text-align: center; margin: 0 auto">
                                                <colgroup>
                                                    <col style="width: 20%;">
                                                    <col style="width: 70%;">
                                                    <col style="width: 10%;">
                                                </colgroup>
                                                <tbody>
                                                <tr>
                                                    <th>
                                                        <span class="my_manage">原始密码：</span>
                                                    </th>
                                                    <th>
                                                        <input type="password" class="form-control form-control-user"
                                                           id="origin_password" placeholder="原始密码"
                                                           name="origin_password"
                                                               readonly="readonly"
                                                           style="margin:auto;width:100%; height:40px;border-radius: 10px;border-color:gainsboro;
                                                   border-style: solid;mso-border-shadow: yes;outline: none;"></th>
                                                    <th>
                                                        <div style="text-align: center;margin: auto">
                                                            <a type="button" onclick="change_both()">
                                                                <img
                                                                        src="../static/assets/img/my_pencil.webp"
                                                                        style="width: 20px">
                                                            </a>
                                                        </div>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <span class="my_manage">修改密码：</span>
                                                    </th>
                                                    <th>
                                                        <input type="password" class="form-control form-control-user"
                                                           id="new_password" placeholder="修改密码"
                                                               readonly="readonly"
                                                           name="user_password"
                                                           style="margin:auto;width:100%; height:40px;border-radius: 10px;border-color:gainsboro;
                                                   border-style: solid;mso-border-shadow: yes;outline: none;"></th>
                                                    <th>

                                                    </th>
                                                </tr>
                                                </tbody>

                                            </table>
                                            <br>
                                            <center><input type="submit" class="btn btn-primary btn-user btn-block"
                                                           value="修 改 信 息" style="width: 40%;height: 40px" onclick="return check_password({{result['u_password']}})"></center>
                                            <!--                                        <div class="myline" style="width:80%;margin:auto;text-align: center">-->
                                            <!--                                            <hr style="margin:10px;height:4px;border:0px;background-color:#D5D5D5;color:#708090;"/>-->
                                            <!--                                        </div>-->
                                            <!--                                        <div class="myline" style="width:80%;margin:auto;text-align: center">-->
                                            <!--                                            <hr style="margin:10px;height:4px;border:0px;background-color:#D5D5D5;color:#708090;"/>-->
                                            <!--                                        </div>-->
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<!-- End #main -->
{% endblock %}
